<template>
	<!-- 侧边栏组件管理 -->
	<div class="channel-aside">
		
		<div class="search-box">
			<Search placeholder="搜索频道" sName="channelSearch" @search="search"/>
		</div>
		
		<div class="title-menu">
			<FindTitle :title="title" :checked="channel.id == title.id" @handleTitle="handleTitle"/>
		</div>
		
		<FindList :showDown="showDown" :checkedId="channel.id" :channels="channels" @handleChannel="handleChannel"/>
		
		<ShowDown :showDown="showDown" @handleShowdown="showDown=!showDown"/>
		
		<LoginBtn/>
	</div>
</template>

<script>
import Search from '@/components/Public/Search'
import FindTitle from './FindTitle'
import FindList from './FindList'
import ShowDown from './ShowDown'
import LoginBtn from './LoginBtn'

export default{
	data(){
		return{
			// 左边频道title数据
			title:{
				id: 100,
				name: '热门频道'
			},
			// 频道item的设置
			showDown: false
		}
	},
	computed:{
		// 选中的频道
		channel(){
			return this.$store.state.channel.channel;
		},
		// 获取频道列表数据
		channels(){
			return this.$store.state.channel.findList || [];
		}
	},
	methods:{
		// 左侧频道搜索时，保存搜索记录，并发送请求
		search(text){
			if(text == '') return;
			let id = new Date().getTime();
			let url = 'url:' + text;
			this.$store.commit('search/pushSearch', {name: 'channelSearch', val: {id, text, url}})
			this.$store.commit('channel/setChannel', {id: 9999, name: text, channel_count: 100});
		},
		// 获取过滤后的频道数据
		getList(){
			let params = {
				where: 'channel/getFindList',
				url: '/x/web-interface/web/channel/category/list'
			}
			this.$store.dispatch('global/request', params)
		},
		handleTitle(id){
			this.$store.commit('channel/setChannel', this.title);
		},
		handleChannel(id){
			let channel = this.channels.find((item) => item.id == id);
			this.$store.commit('channel/setChannel', channel);
		}
	},
	created() {
		this.getList();
	},
	components:{
		Search,
		FindTitle,
		FindList,
		ShowDown,
		LoginBtn
	}
}
</script>

<style lang="less" scoped>
.channel-aside{
	width: 100%;
	height: 100%;
	user-select: none;
	background-color: #fff;
	.search-box{
		height: 36px;
		line-height: 36px;
		padding: 20px 18.5px 10px 20px;
	}
	.title-menu{
		height: 46px;
		line-height: 46px;
	}
}
</style>
